<template>
  <div class="table-container">
    <div class="table-header-container">
      <div class="status-container">
        <div class="index-container">
          <section
            v-if="showCheckBox"
            class="checkbox-container"
          >
            <a-checkbox
              v-if="!data.disabled"
              :checked="checked"
              @change="changeCheck"
            />
            <a-checkbox
              v-else
              :checked="true"
              disabled
            />
          </section>
          <div class="index">
            {{ data.order }}
          </div>
          <div class="desc">
            第{{ data.order }}期
          </div>
        </div>
        <div class="amount-container row-container">
          <div class="value">
            ${{ data.amount }}
          </div>
          <div class="desc">
            待还金额
          </div>
        </div>
        <div class="status-container row-container">
          <div class="value">
            <span :class="`icon icon-${statusClassName}`" /> {{ statusText }}
          </div>
          <div class="desc">
            状态
          </div>
        </div>
      </div>

      <div :class="`tips-container tips-container-${paymentClassName}`">
        {{ paymentText }}
      </div>
    </div>

    <div class="info-container">
      <div class="table-info-container">
        <Table :data="data" />
      </div>
    </div>
  </div>
</template>

<script>
import Table from './Table.vue';

export default {
  components: {
    Table
  },

  model: {
    prop: 'checked',
    event: 'checked'
  },

  props: {
    checked: {
      type: Boolean,
      default: () => false
    },

    showCheckBox: {
      type: Boolean,
      default: () => true
    },

    data: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    // status: 0:’待还’,1:’已还’,2:’逾期’,”，
    statusText() {
      switch (this.data.status) {
        case 0:
          return '待还款';

        case 1:
          return '已结清';

        case 2:
          return '逾期待还款';
      }
    },

    statusClassName() {
      switch (this.data.status) {
       case 0:
          return 't';

        case 1:
          return 'green';

        case 2:
          return 'red';
      }
    },

    paymentText() {
       switch (this.data.status) {
       case 0:
       case 2:
          return '待支付';

        case 1:
          return '已结清';
      }
    },

    paymentClassName() {
       switch (this.data.status) {
       case 0:
       case 2:
          return 'red';

        case 1:
          return 'gray';
      }
    }
  },

  methods: {
    changeCheck(evt) {
      if (this.data.disabled) {
        return;
      }
      this.$emit('checked', !!evt.target.checked);
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  background: $white;
  box-shadow: 0px 0px 6px 4px rgba(236, 236, 236, 0.5);
  border-radius: $border-radius-lg;
  border: 1px solid $gray-21;
  // display: flex;

  .table-header-container {
    display: flex;
    justify-content: space-between;
    padding: $padding-xs;
    font-size: 18px;
    border-bottom: 1px solid $gray-21;

    & > .status-container {
      display: flex;
      align-items: center;
      .index-container {
        display: flex;
        align-items: center;

        .checkbox-container {
          margin-right: $margin-xs;
        }

        .index {
          font-size: $font-size-sm;
          padding: 3px 10px;
          color: $theme-color;
          background-color: rgba($color: $theme-color, $alpha: 0.2);
          border-radius: $border-radius-sm;
          font-weight: bold;
        }

        .desc {
          margin-left: $margin-base;
          font-weight: bold;
        }
      }

      .row-container{
        display: flex;
        margin-left: $margin-md;
        .value {
          font-weight: bold;
        }
        .desc {
          color: $gray-12;
          margin-left: $margin-base;
        }
      }

      .status-container {
        .value {
          display: flex;
          align-items: center;
          .icon {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: $theme-color;
            margin-right: $margin-base;
          }

          .icon-t {
            background-color: $theme-color;
          }

          .icon-green {
            background-color: $green;
          }

          .icon-red {
            background-color: $red;
          }
        }
      }
    }

    & > .tips-container {
      line-height: 32px;
      padding: 0 $padding-sm;
      font-weight: bold;
      font-size: $font-size-sm;
      border-radius: $border-radius-sm;
    }

    & > .tips-container-red {
      color: $red;
      background-color: rgba($color: $red, $alpha: 0.2);
    }

    & > .tips-container-gray {
      color: $gray-22;
      background-color: rgba($color: $gray-22, $alpha: 0.2);
    }
  }

   .table-info-container {
     padding: $padding-xs;
   }
  // & > .index-container {
  //   padding: $padding-xs;
    // max-width: 190px;
    // height: 190px;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    // border-right: 1px solid $gray-21;
    // .index {
    //   width: 48px;
    //   height: 48px;
    //   line-height: 48px;
    //   border-radius: 50%;
    //   text-align: center;
    //   font-size: 24px;
    //   font-weight: bold;
    //   color: $theme-color;
    //   background-color: rgba($color: $theme-color, $alpha: 0.15);
    // }
    // .desc {
    //   padding: 0 $padding-md;
    //   margin-top: $margin-xs;
    // }
  // }

  // & > .info-container {
  //   flex: 1;
  //   display: flex;
  //   flex-direction: column;
  //   .header-container {
  //     padding: $padding-xs;
  //     display: flex;
  //     align-items: center;
  //     font-size: $font-size-lg;
  //     font-weight: bold;
  //     color: $gray-12;
  //     border-bottom: 1px solid $gray-21;
  //     width: 100%;
  //     .paid-text {
  //       height: 32px;
  //       line-height: 32px;
  //       padding: 0 $padding-xs;
  //       border-radius: 25px;
  //       color: $red-2;
  //       font-weight: bold;
  //       background-color: rgba($color: $red-2, $alpha: 0.15);
  //       margin-right: $margin-xs;
  //     }

  //     .text {
  //       margin-left: 10px;
  //       color: $black-1;
  //     }
  //   }

  //   .table-info-container {
  //     padding: $padding-xs;
  //     flex: 1;
  //   }
  // }
}
</style>
